<template>
	<view>
		<!-- @click="currentIdonSwiperDetail(item.jump_id)"  -->
		<!-- :class='itemStyle[index].css ?itemStyle[index].css : "" ' -->
		<view class="swiperPanel">
			<view class="swiperItem" v-for="(item, index) in swiperList" :key="index"  
			 @touchstart="startMove" @touchend="endMove" :data-id='item.jump_id'
			 :data-type='item.type' :data-shopType='item.shop_type'
			:style="{width:itemStyle[index].width,height:itemStyle[index].height,
			bottom: itemStyle[index].bottom, zIndex: itemStyle[index].zIndex, opacity: itemStyle[index].opacity}">
				<image class="pic" :src="item.pic_url" @tap.shop="gotoIndexOne(item,index)"></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			swiperList: {
				type: Array,
				default: []
			}
		},
		data() {
			return {
				slideNote: {
					x: 0,
					y: 0
				},
				screenWidth: 0,
				itemStyle: [],
			};
		},
		created() {
			var macInfo = uni.getSystemInfoSync();
			this.screenWidth = macInfo.screenWidth;
			// 计算swiper样式
			this.swiperList.forEach((item, index) => {
				this.itemStyle.push(this.getStyle(index))
			})
			setInterval(() => {
				var newList = JSON.parse(JSON.stringify(this.itemStyle))
				newList.push(newList[0])
				newList.splice(0, 1)
				this.itemStyle = newList
			}, 4000)
		},
		methods: {
			gotoIndexOne(item,index){
				console.log(item)
				// #ifdef MP-WEIXIN
					if(item.type == 4){
						uni.navigateTo({
							url:'/pages/index1/index1'
						})
					}
				// #endif 
				if(item.type == 5){
					uni.navigateTo({
						url:'/pagesHome/richTextDetails?id='+item.jump_id+'&type='+item.type
					})
				}
			},
			getStyle(e) {
				return {
					width: e == 0 ? '678rpx' : e == 1 ? '610rpx' : '560rpx',
					height: e == 0 ? '407rpx' : e == 1 ? '366rpx' : '326rpx',
					bottom: e == 0 ? '48rpx' : e == 1 ? '22rpx' : '0rpx',
					zIndex: e == 0 ? 5 : e == 1 ? 4 : 3,
					opacity: e == 0 ? 1 : e == 1 ? 0.8 : 0.4,
				}
			},
			startMove(e) {
				this.slideNote.x = e.changedTouches[0] ? e.changedTouches[0].pageX : 0;
				this.slideNote.y = e.changedTouches[0] ? e.changedTouches[0].pageY : 0;
			},
			endMove(e) {
				if((e.changedTouches[0].pageY - this.slideNote.y) == 0 &&
					(e.changedTouches[0].pageX - this.slideNote.x) == 0){
					this.$global.$swiperPage({
						jump_id:e.target.dataset.id || e.currentTarget.dataset.id,
						type:e.target.dataset.id || e.currentTarget.dataset.type,
						shop_type:e.target.dataset.shopType || e.currentTarget.dataset.shopType,
					})
					return
				}
				var newList = JSON.parse(JSON.stringify(this.itemStyle))
				if ((e.changedTouches[0].pageY - this.slideNote.y) < 0) {
					var last = [newList.pop()]
					newList = last.concat(newList)
				} else {
					newList.push(newList[0])
					newList.splice(0, 1)
				}
				this.itemStyle = newList
			}
		}
	}
</script>

<style lang="scss" scoped>
	// @keyframes roundImg {
	// 		0%{ bottom:48rpx!important;opacity:1!important;width:200rpx!important}
	// 		20%{ bottom:53rpx!important;opacity:0.9!important}
	// 		40%{ bottom:58rpx!important;opacity:0.8!important}
	// 		60%{ bottom:63rpx!important;opacity:0.6!important}
	// 		80%{ bottom:78rpx!important;opacity:0.4!important}
	// 		100%{ bottom:83rpx!important;opacity:0.2!important}
	// 	}
	// .roundImg{
	// 	animation-name: roundImg;
	// 	animation-duration: 3s;
	// 	background-color: red;
	// }
	.swiperPanel {
		position: relative;
		width: 100%;
		margin-top: 56rpx;
		padding: 40rpx 36rpx 0;
		height: 455rpx;
		box-sizing: border-box;
		position: relative;

		.swiperItem {
			width: 560rpx;
			height: 326rpx;
			position: absolute;
			bottom: 0;
			left: 50%;
			transform: translateX(-50%);
			transition: all .5s;

			.pic {
				width: 100%;
				height: 100%;
				border-radius: 20px;
				// box-shadow: 0 0 10px #333;
			}
		}
	}
</style>
